<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>立体字时钟</title>
		<link rel="stylesheet" href="./30-立体字时钟.css">
	</head>
	<style>
		@import url("http://fonts.googleapis.com/css?family=Kanit");

		* {
			margin: 0;
			padding: 0;
		}

		body {
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #eacccc;
			user-select: none;
		}

		.clock {
			display: flex;
		}

		.clock p {
			width: 95px;
			font-size: 150px;
			color: #fff;
			text-align: center;
			font-family: "Kanit";
			font-weight: 900;
			text-shadow: 0 1px 0 #deafaf,
				0 2px 0 #bda8a8,
				0 3px 0 #d8a1a1,
				0 4px 0 #d59999,
				0 5px 0 #d29292,
				0 6px 0 #cf8b8b,
				0 7px 0 #cc8484,
				0 8px 0 #c97d7d,
				0 0 5px rgba(231, 156, 156, 0.05),
				0 -1px 3px rgba(231, 156, 156, 0.2),
				0 9px 9px rgba(231, 156, 156, 0.3),
				0 12px 12px rgba(231, 156, 156, 0.3),
				0 15px 15px rgba(231, 156, 156, 0.3);
		}
	</style>
	<body>
		<div class="clock">
			<p id="1">0</p>
			<p id="2">0</p>
			<p id="3">:</p>
			<p id="4">0</p>
			<p id="5">0</p>
			<p id="6">:</p>
			<p id="7">0</p>
			<p id="8">0</p>
		</div>
	</body>
	<script>
		function myTime() {
			let time = new Date();
			let hh = time.getHours();
			let mm = time.getMinutes();
			let ss = time.getSeconds();

			document.getElementById("1").innerText = Math.floor(hh / 10);
			document.getElementById("2").innerText = hh % 10;
			document.getElementById("4").innerText = Math.floor(mm / 10);
			document.getElementById("5").innerText = mm % 10;
			document.getElementById("7").innerText = Math.floor(ss / 10);
			document.getElementById("8").innerText = ss % 10;
		}

		setInterval(myTime, 1000);
	</script>

</html>